<template>
	<view>
		<!-- <u-navbar title="账户认证" :autoBack="true"></u-navbar> -->
		<view class="container">
			<view class="" style="margin-top: 160rpx;" v-if="info.status == 3">
				<view class="weer">
					<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" src="@/static/img/user/dui.png"
						mode="" />
					<p>已完成认证</p>
				</view>
				<view class="back" @tap="back">返回</view>
			</view>
			<view class="" v-else-if="info.status == 2">
				<view class="weer">
					<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" src="@/static/img/user/wenhao.png"
						mode="" />
					<p>已提交认证申请，请耐心等待</p>
				</view>
				<view class="back" @tap="back">返回</view>
				<view class="auth_pay">
					<text>尚未缴纳认证费用？立即</text>
					<text style="margin-left: 10rpx;font-size: 28rpx;color: #f84115;" @tap="goAuthPay">缴纳</text>
				</view>
			</view>
			<view class="" v-else>
				<view>
					<view class="main_card">
						<view class="input_phone">
							<text class="left_txt">姓名</text>
							<input type="text" style="font-size: 26rpx;" placeholder="请填写您的真实姓名"
								placeholder-style="font-size:24rpx;color:#CCCCCC" v-model="realname">
						</view>
						<view class="input_phone">
							<text class="left_txt">身份证号</text>
							<input type="text" style="font-size: 26rpx;" placeholder="请填写您的身份证号"
								placeholder-style="font-size:24rpx;color:#CCCCCC" v-model="IDcard">
						</view>
						<!-- <view class="tips">
						<view>您当日拥有3次人脸认证机会，操作前请注意:  </view> 
						<view style="margin-top: 30rpx;">1. 保证摄像头清晰，并处于光线良好的条件下 </view>
						<view>2.请保持姿势规范且面部处于画面中央，请勿移出镜头外，请勿手部拖住脸部或捂脸</view>
						<view>3.请勿戴眼镜、口罩、帽子，勿用刘海遮住额头</view>
					</view> -->
						<view class="ID1">
							<text class="ID-title">身份证正面照</text>
							<view class=""
								style="width: 194rpx;position: relative;margin-top: 10px;margin-bottom: 10px;">
								<robby-image-upload1 :src="src1" :width="width" :height="height"
									:lineheight="lineheight" :borderRadius="borderRadius"></robby-image-upload1>
							</view>
						</view>

						<view class="ID2">
							<text class="ID-title">身份证反面照</text>
							<view class="" style="width: 194rpx;position: relative;margin-top: 10px;">
								<robby-image-upload2 :src="src2" :width="width" :height="height"
									:lineheight="lineheight" :borderRadius="borderRadius"></robby-image-upload2>
							</view>
						</view>

						<view class="bottom_btn">
							<button class="given" @tap="auth">提交认证</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="isShow" customStyle="width:90%" round="12" mode="center" @close="close">
			<view class="dialog">
				<view class="dialog_title">温馨提醒</view>

				<view class="figure">
					姓名和身份证号务必一致方可提交，否则可能导致审核失败，请再次确认
				</view>
				<view class="payBtn">
					<view style="background-color: #e5e5e5;" @tap="cancle();">取消认证</view>
					<view style="background-color: #ff5402;" @tap="confirm();">确认认证</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import robbyImageUpload1 from '@/components/robby-image-upload/robby-image-upload1.vue';
	import robbyImageUpload2 from '@/components/robby-image-upload/robby-image-upload2.vue';
	export default {
		data() {
			return {
				src1: '',
				src2: '',
				width: '194upx',
				height: '194upx',
				lineheight: '194upx',
				borderRadius: '50%',
				info: {},

				isShow: false,

				realname: '',
				IDcard: '',
			}
		},

		components: {
			robbyImageUpload1,
			robbyImageUpload2
		},

		onLoad() {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}
			this.loadData();

			// 身份证正面照
			uni.$on('changeID1', (option) => {
				this.src1 = option.path
				// console.log(this.src1)
			})

			// 身份证反面照
			uni.$on('changeID2', (option) => {
				this.src2 = option.path
				// console.log(this.src2)
			})
		},

		onPullDownRefresh() {
			this.loadData();
			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},

		computed: {
			...mapState(['hasLogin']),
		},

		methods: {
			async loadData() {
				let token = uni.getStorageSync('token');

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;
				this.info = info
			},

			close() {
				this.isShow = false;
			},

			auth() {
				this.isShow = true;
			},

			cancle() {
				this.close()
			},

			goAuthPay() {
				uni.navigateTo({
					url: '/pages/user/user-auth-pay'
				})
			},

			confirm() {
				this.close()
				// let formdata = e.detail.value
				if (!this.realname) {
					this.$api.msg('请输入真实姓名！')
					return false;
				}
				if (!this.IDcard) {
					this.$api.msg('请输入身份证号码！')
					return false;
				}
				// console.log(this.src1)
				if (!this.src1) {
					this.$api.msg('必须上传身份证正面照！')
					return false;
				}
				if (!this.src2) {
					this.$api.msg('必须上传身份证反面照！')
					return false;
				}

				let dataObj = {
					realname: this.realname,
					IDcard: this.IDcard,
					ID1: this.src1,
					ID2: this.src2,
				}

				this.auth_apply(dataObj);
			},

			async auth_apply(dataObj) {
				dataObj.token = uni.getStorageSync('token');
				// console.log(dataObj)
				let res = await this.$myRequest({
					url: '/userAuth',
					methods: 'POST',
					data: dataObj
				})

				// console.log(res)

				this.$api.msg(res.data.msg);
				let is_open_pay = res.data.data['is_open_pay'];
				if (is_open_pay == "0") {
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/user/user'
						})
					}, 1000)
				} else {
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/user/user-auth-pay'
						})
					}, 1000)
				}
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f6f6f6;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.container {
		position: relative;
		/* #ifdef APP-PLUS */
		top: 160rpx;
		/* #endif */

	}

	.weer {
		margin: 60rpx 0 120rpx 0;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.weer p {
		margin-top: 30rpx;
	}

	.back {
		width: 100%;
		text-align: center;
		background-color: #f84115;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #ffffff;
		padding: 20rpx 0;
	}

	.main_card {
		margin-top: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		padding-top: 0;
		background-color: #fff;
		height: 700rpx;
	}

	.card_d {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 30rpx;
		padding: 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input_phone {
		display: flex;
		align-items: center;
		padding: 22rpx 0rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f4f4f4;

	}

	.left_txt {
		font-size: 26rpx;
		color: #121212;
		min-width: 140rpx;
	}

	.tips {
		background: #EFF8FF;
		margin-top: 40rpx;
		padding: 24rpx 30rpx;
		border-radius: 10rpx;
		color: #FF0000;
		font-size: 20rpx;
	}

	.bottom_btn {
		border-radius: 70rpx;
		text-align: center;
		color: #fff;
		font-size: 26rpx;
		height: 74rpx;
		line-height: 74rpx;
		margin-top: 54rpx;
	}

	.ID-title {
		font-size: 26rpx;
	}

	.given {
		margin-top: 40rpx;
		width: 100%;
		padding: 10rpx 0;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 26rpx;
		text-align: center;
		background: linear-gradient(to right, #fe6600, #fe6601);
	}

	.dialog {
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
	}

	.dialog_title {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #e3e3e3;
	}

	.consum {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 14rpx;
	}

	.consum_left {
		display: flex;
		align-items: center;
	}

	.consum_left p {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #464648;
	}

	.consum_left span {

		color: #c97d5a;
	}

	.amount {
		font-size: 32rpx;
		color: #e20d0d;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.figure {
		margin: 30rpx 0;
		font-size: 26rpx;
		line-height: 30px;
	}

	.payBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.payBtn view {
		width: 48%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
		border-radius: 50rpx;
		padding: 22rpx 0;
		/* margin-top: 50rpx; */
	}

	.auth_pay {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60px;
		line-height: 60px;
		font-size: 13px;
	}
</style>